<script setup lang="ts">
import {ref} from "vue"
import { saveDict } from "@/api/dict";
import { ElMessage } from "element-plus";
//绑定表单
const addFrom = ref();
//绑定字典
const dict=ref({
  name: "",
  code: "",
  pid: 0,
  sorts: 0
})
//是否显示

//通知父组件
const emits = defineEmits(["close", "refreshData"]);
//定义规则
const rules = {
  code: [
    { required: true, message: "请输入编码", trigger: "blur" }
  ],
  name: [
    { required: true, message: "请输入名称", trigger: "blur" }
  ]
};
//保存字典
async function save() {
  //先进行表单验证
  let valid = await addFrom.value.validate(() => {});
  if (!valid) return;
  let res = await saveDict(dict.value);
  if (res.code == 200){
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    //通知父组件关闭
    emits("refreshData");
    close();
  }
}

//取消关闭
function close(){
  emits("close");
}

//初始化数据
function init(){
  dict.value = {
    name: "",
    code: "",
    pid: 0,
    sorts: 0
  }
}

//接收前端传来的参数
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

//暴露方法供父组件使用
defineExpose({ init });
</script>

<template>
  <el-dialog
    :model-value="visible"
    title="分组管理"
    width="500"
    :close-on-click-modal="false"
    @close="close"
  >
    <el-form ref="addFrom" :model="dict" :rules="rules">
      <el-form-item label="编码" prop="code">
        <el-input v-model="dict.code" placeholder="请输入编码" />
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="dict.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="info" @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
